<template>
    <div class="drinks myFlex">
        <!-- 存货单内容 -->
        <div class="managePanel">
            <el-table
                    border
                    height="100%"
                    ref="mytable"
                    :data="table_data"
                    style="width: 100%;;background-color: gainsboro"
            >
                <el-table-column align="center"
                                 :label="'编号'"
                >
                    <template slot-scope="scope">
                        <span>{{scope.$index}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        v-for="(item,index,key) in table_columns"
                        :item="item"
                        :key="key"
                        :index="index"
                        :label="item.label"
                >
                    <template slot-scope="scope">
                        <el-input
                                v-if="scope.row.edit"
                                size="small"
                                v-model="scope.row[item.prop]"
                                :placeholder="'请输入'+item.label"
                                style="width: 100px"
                        ></el-input>
                        <span v-if="!scope.row.edit">{{scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <!-- 全局控制的编辑 -->
                        <div v-if="is_edit&&scope.row.add==undefined" style="display: inline-block;">
                            <!-- 编辑 -->
                            <el-button
                                    size="mini"
                                    v-if="!scope.row.edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                    type="primary"
                            >
                                <span class="el-icon-edit-outline"></span>
                                编辑
                            </el-button>
                            <!-- 保存 -->
                            <el-button
                                    size="mini"
                                    type="success"
                                    :plain="true"
                                    v-if="scope.row.edit"
                                    @click="handleSave(scope.$index, scope.row)"
                            >
                                <span class="el-icon-circle-check"></span>
                                保存
                            </el-button>
                        </div>
                        <span>&nbsp;</span>
                        <!-- 全局控制删除 -->
                        <el-button
                                size="mini"
                                v-if="is_delete&&scope.row.add==undefined"
                                :plain="true"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                        >
                            <span class="el-icon-error"></span>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="addOrSava" align="center">
            <el-button type="primary" @click="toAdd">
                <span class="el-icon-circle-plus-outline"></span>
                新增饮料
            </el-button>
            <el-button type="success" @click="handleUpdate">
                <span class="el-icon-circle-check"></span>
                保存更新
            </el-button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Drinks",
        data() {
            return {
                is_edit: true, //是否可编辑
                is_delete: true, //是否可删除
                space_color: true, //隔行变色
                //表头信息
                table_columns: [
                    {
                        prop: "name",
                        label: "名称",
                        width: "150"
                    },
                    {
                        prop: "price",
                        label: "单价",
                        width: "150"
                    },
                    {
                        prop: "remain",
                        label: "库存量",
                        width: ""
                    }
                ],
                //表格数据
                table_data:[]
            };
        },

        created() {
            /* 先深拷贝一份 */
            let temp = this.$store.state.drinks
            for(let i in temp){
                /* 注意，是每个对象进行深拷贝！ */
                this.table_data.push(Object.assign({},temp[i]))
            }
        },

        mounted: function() {
            //确保方法在页面渲染后调用
            this.$nextTick(function() {
                /////方法
                this.tableRowClassName();
            });
        },

        methods: {
            toAdd(){
                this.$router.push('/add');
            },
            //隔行变色
            tableRowClassName() {
                //选取DOM节点
                var trs = this.$refs.mytable.$el
                    .getElementsByTagName("tbody")[0]
                    .getElementsByTagName("tr");
                for (var i in trs) {
                    if (i % 2 == 0) {
                        //当隔行变色未true时改变颜色
                        if (this.space_color) {
                            trs[i].style.backgroundColor = "#f0f9eb";
                        } else {
                            trs[i].style.backgroundColor = "";
                        }
                    }
                }
            },
            //删除
            handleDelete(index, row) {
                this.table_data.splice(index, 1);
                this.$message({
                    message: "删除成功！",
                    type: "success",
                    offset:240,
                    duration:1000
                });
            },
            //保存
            handleSave(index, row) {
                //因为 input 和 span 用的是同一个 model ,所以只需要改变 edit 即可
                row.edit = false;
                this.$message({
                    message: "保存成功！",
                    type: "success",
                    offset:240,
                    duration:1000
                });
            },

            handleEdit(index, row){
                row.edit = true;
            },

            handleUpdate(){

                const loading = this.$loading({
                    lock: true,
                    text: '数据更新中',
                    spinner: 'el-icon-loading',
                    target:'.managePanel',		//指定 target 即可！
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                //延时跳转
                const _this = this
                setTimeout(() => {
                    loading.close();
                    _this.$message({
                        message: "数据更新成功！",
                        type: "success",
                        offset:250,
                        duration:1000
                    });
                }, 600);


                this.$store.commit('confirmUpdateList',this.table_data)
            }
        },
        watch: {
            space_color: function() {
                //监听数据变化
                this.$nextTick(function() {
                    /////方法
                    this.tableRowClassName();
                });
            },
            table_data: function() {
                //监听数据变化f
                this.$nextTick(function() {
                    /////方法
                    this.tableRowClassName();
                });
            }
        }
    }
</script>

<style scoped>
    .myFlex{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .drinks{
        width: 100%;
        height:100%;
    }

    .managePanel{
        width: 90%;
        height: 82%;
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        opacity: 0.9;
    }

    .addOrSava{
        width: 40%;
        padding-top: 20px;
        height: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    @media screen and (max-width: 1200px) {
        .managePanel{
            width: 100%;
            height: 82%;
            background-color: white;
            border-radius: 20px;
            opacity: 0.9;
        }

        .addOrSava{
            width: 100%;
            padding-top: 20px;
            height: 10%;
            display: flex;
            justify-content: space-between;
            align-items: center
        }
    }
</style>